<template>
  <div class="">
    <!-- 面包屑 -->
    <el-breadcrumb separator="/" style="font-size: 12px; margin-botton: 20px">
      <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>订单管理</el-breadcrumb-item>
      <el-breadcrumb-item>订单列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片 -->
    <el-card style="margin-top: 15px">
      <el-row>
        <el-col :span="5">
          <el-input placeholder="请输入订单编号" class="input-with-select">
            <el-button
              slot="append"
              icon="el-icon-search"
            ></el-button> </el-input
        ></el-col>
      </el-row>
      <!-- 表格 -->
      <el-table style="margin-top: 15px; width: 100%" :data="ordersList">
        <el-table-column type="index" label="#" width="40px"> </el-table-column>
        <el-table-column prop="order_number" label="订单编号" width="200px">
        </el-table-column>
        <el-table-column prop="order_price" label="订单价格" width="200px">
        </el-table-column>
        <el-table-column label="是否付款" width="200px">
          <template slot-scope="scope">
            <div>
              <el-tag v-if="scope.row.pay_status == 1" type="success"
                >已付款</el-tag
              >
              <el-tag v-if="scope.row.pay_status == 0" type="warning"
                >未付款</el-tag
              >
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="is_send" label="是否发货" width="200px">
        </el-table-column>
        <el-table-column label="下单时间" width="200px">
          <template slot-scope="scope">
            <div>
              {{ scope.row.create_time | detaTime }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template>
            <div>
              <el-button
                type="primary"
                icon="el-icon-edit"
                round
                @click="editCity"
              ></el-button>
              <el-button
                type="info"
                icon="el-icon-location-information"
                round
                @click="progress"
              ></el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>

      <!-- 打开地址弹框 -->

      <el-dialog title="修改地址" :visible.sync="cityDia" width="30%">
        <el-form>
          <el-form-item label="省市区/县" label-width="80px">
            <!-- 级联框 -->

            <el-cascader
              v-model="checkArr"
              :options="City"
              :props="{ defaultProps }"
              @change="handleChange"
            ></el-cascader>
          </el-form-item>
          <el-form-item label="详细地址" label-width="80px">
            <el-input autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="cityDia = false">取 消</el-button>
          <el-button type="primary" @click="cityDiaOk">确 定</el-button>
        </div>
      </el-dialog>

      <!-- 订单进度 -->
      <el-dialog
        title="查看物流进度"
        :visible.sync="progressDia"
        width="50%"
        :before-close="handleClose"
      >
        <el-timeline :reverse="false">
          <el-timeline-item
            style="font-size: 18px"
            :icon="item.icon"
            v-for="(item, index) in Wuliu"
            :key="index"
            :color="item.color"
            :timestamp="item.time"
          >
            {{ item.context }}
          </el-timeline-item>
        </el-timeline>
        <span slot="footer" class="dialog-footer">
          <el-button @click="progressDia = false">取 消</el-button>
          <el-button type="primary" @click="progressDiaOk">确 定</el-button>
        </span>
      </el-dialog>

      <!-- 分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.pagenum"
        :page-sizes="[1, 2, 3, 4]"
        :page-size="queryInfo.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
import City from "../miks/city_data2017_element";
import Wuliu from "../miks/wuliu";
// console.log(City);
export default {
  data() {
    return {
      checkArr: [],
      City,
      Wuliu: Wuliu[0].data,
      defaultProps: {
        expandTrigger: "hover",
        value: "value",
        children: "children",
        label: "label",
      },
      ordersList: [],
      queryInfo: {
        //   每页条数
        pagesize: 6,
        // 第几页
        pagenum: 1,
      },
      total: 0,
      cityDia: false,
      progressDia: false,
    };
  },
  created() {
    this.getOrdersList();
  },
  methods: {
    handleChange() {},
    handleClose() {
      this.progressDia = false;
    },
    //   订单进度弹框
    progress() {
      this.progressDia = true;
    },
    // 订单进度   确定
    progressDiaOk() {},
    //编辑地址弹框
    editCity() {
      this.cityDia = true;
    },
    // 编辑地址弹框  确定
    cityDiaOk() {},
    // 渲染列表
    async getOrdersList() {
      const res = await this.$API.getOrdersListApi(this.queryInfo);
      console.log("订单列表", res);
      const { goods, total } = res;
      this.ordersList = goods;
      this.total = total;
    },
    // 分页
    handleSizeChange(val) {
      this.queryInfo.pagesize = val;
      this.getOrdersList();
    },
    handleCurrentChange(val) {
      this.queryInfo.pagenum = val;
      this.getOrdersList();
    },
  },
  components: {},
};
</script>

<style lang='scss'>
</style>
